<template>
	<view class="footer">
		<u-divider text="登录方式"></u-divider>
		<view class="buttonBox">
			<view class="wxLogin btn" @click="wxLogin">
				<image
					class="icon"
					:class=" userInfo.wx_openid && 'opacity' "
					src="@/static/mine/wx.png"
					mode="scaleToFill"
				/>
				<view class="txt">  {{ userInfo.wx_openid ? "已绑定" :" 微信登录" }} </view>
			</view>
			<view class="accountLogin btn" @click="accountLogin">
				<image
					class="icon "
					:class=" userInfo.username && 'opacity' "
					src="@/static/mine/phone.png"
					mode="scaleToFill"
				/>
				<view class="txt"> {{userInfo.username ? "已绑定" :" 用户登录"}} </view>
			</view>
		</view>
	</view>
</template>

<script>
import route from '@/uni_modules/uview-ui/libs/util/route.js';
import { wxLoginApi } from '@/servers/userServer.js';
import { mapState , mapActions } from 'vuex'
import { toast } from '@/common/showTips.js';
export default {
	data() {
		return {};
	},
	computed:{
		...mapState('userStore' , ['userInfo'])
	},
	methods: {
		...mapActions("userStore" , ['updateUserInfoAction' , 'updateUserInfoFn']),
        accountLogin(){
			if(this.userInfo.username){
				toast({title:"已绑定过用户名"})
				return
			}
            route('/pages_second/account/login')
        },
		async wxLogin(){
			if(this.userInfo.wx_openid){
				toast({title:"已绑定过微信"})
				return
			}
			uni.login({
				success:async (success)=>{
					const option = {
						code: success.code,
						user_id:this.userInfo.id,
					}
					const res = await wxLoginApi(option)
					if(res.code === 0){
						toast({title:"登录成功~"})
						await this.updateUserInfoAction(this.userInfo.id)
					}
					if(res.code === 1){
						toast({title:res.message})
						await this.updateUserInfoFn(res.data[0])
					}
				},
			})
			
		}
    },
	watch: {},
};
</script>

<style lang="scss" scoped>
.opacity{
	opacity: 0.6;
}
.icon {
		width: 112rpx;
		height: 112rpx;
	}
	.buttonBox {
        display: flex;
        justify-content: space-evenly;
		.btn {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-weight: 600;
			font-size: 28rpx;
			margin-right: 40rpx;
			.txt {
				margin-top: 16rpx;
			}
		}
	}
</style>
